<template>
  <div class="Productdetails">
    <producetop></producetop>
    <div class="box">
      <div class="probox" v-for="(k,i) in 3" :key=i>
        <!-- 1 -->
        <router-link to="/ddetails">
          <div class="product">
            <img src="../assets/productdetails/package.png" />
            <div>
              <a>干湿分离游泳健身包</a>
              <span>多仓收纳，干湿分离，游泳健身外出旅游，一包搞定</span>
              <span class="price">
                <i>¥</i>
                179
              </span>
            </div>
          </div>
        </router-link>
        <!-- 2 -->
        <router-link to="/ddetails">
        <div class="product">
          <img src="../assets/productdetails/proof.png" />
          <div>
            <a>游泳手机防水袋</a>
            <span>深度防水抗压，拍照清晰，触感灵敏，记录水下世界</span>
            <span class="price">
              <i>¥</i>
              49
            </span>
          </div>
        </div>
        </router-link>
      </div>
    </div>
    <!-- 主体内容 结束 -->
    <!-- 底线 -->
    <div class="bottom">······已经到底了······</div>
    <tabbar></tabbar>
  </div>
</template>

<style scoped>
.Productdetails {
  padding: 130px 0 100px 0;
}
.Productdetails .box {
  width: 100%;
}
.Productdetails .probox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.Productdetails .probox>a{
  color: #333;
}
.Productdetails .product {
  width: 90%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid #efefef;
  background-color: #fff;
  margin: 10px;
}

.Productdetails .product > img {
  width: 100%;
  display: block;
  margin-bottom: 20px;
  border-radius: 10px 10px 0 0;
}
.Productdetails .product > div {
  padding: 0 10px;
  background-color: #fff;
}
.Productdetails .product a {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.Productdetails .product span {
  display: block;
  margin-bottom: 10px;
}
.Productdetails .price {
  color: #dc3545;
  font-weight: 600;
  font-size: 16px;
}
.Productdetails .price > i {
  color: #dc3545;
  font-style: normal;
}
.Productdetails .bottom {
  color: #aaa;
  margin-top: 20px;
}
</style>
